<template>
  <div class="torent">
    <v-header head-title="发布房屋租售" goBack="true" house-publish="发布" @housePublish="addPic"></v-header>
    <div class="page-content">
      <mt-cell class="border-bottom " title="区域选择：" :value="areaString" is-link @click.native="handlerArea"></mt-cell>
      <!--输入小区名-->
      <ul class="input_row ">
        <li>
          <span>小区名称：</span>
          <input type="text" placeholder="请输入小区名称" v-model="homeName">
        </li>
      </ul>
      <div style="width: 100%;height: 5px;background:#f2f2f2"></div>
      <mt-popup v-model="areaVisible" class="area-class" position="bottom">
        <div class="btn_list">
          <button class="btn_one" @click="cancelBtn()">取消</button>
          <button class="btn_two" @click="sureBtn()">确定</button>
        </div>
        <mt-picker :slots="slots" @change="onValuesChange"></mt-picker>
      </mt-popup>
    </div>
    <publish @getValue="getValue" @getImage="getImage" :holder="holder"></publish>
  </div>
</template>
<style lang="scss">
  .torent {
    width: 100%;
    padding-top: 40px;
    .input_row {
      width: 100%;
      li {
        height: 45px;
        span {
          font-size: 15px;
          line-height: 45px;
          margin-left: 10px;
        }
        input {
          outline: none;
          border: none;
          color: #777777;
          font-size: 14px;
          /*margin-left: 10px;*/
        }

      }
      li:last-child {
        border-bottom: none;
      }
    }
    .mint-popup {
      width: 100%;
    }

    .picker-item {
      font-size: 15px;
    }

    .picker-item.picker-selected {
      color: #0078de;
    }

    .btn_list {
      width: 100%;
      height: 40px;
      border-bottom: 1px solid #f2f2f2;
      .btn_one, .btn_two {
        width: 120px;
        height: 39px;
        background: #fff;
        outline: none;
        border: none;
        font-size: 15px;
      }
      .btn_one {
        float: left;
      }
      .btn_two {
        float: right;
        color: #007aff;
      }
    }
  }
</style>
<script>
  import headTop from '../header/Header.vue'
  import qs from 'qs'
  import { Toast, Indicator } from 'mint-ui'
  import {
    loadVillageId,
    loadOpenId
  } from '../../common/js/cache.js'
  import commonUrl from '../../common/js/commonUrl.js'
  import publish from '../common/publish.vue'
  import data from '../../../static/data.json'

  let index = 0 // 默认设置二级的index
  let index2 = 0 // 默认设置三级的index
  // 初始化省
  // let province = data.map(res => {
  //   return res.name
  // })
  // // 初始化市
  // let city = data[index].childs.map(res => {
  //   return res.name
  // })
  // // 初始化区
  // let area = data[index].childs[index2].childs.map(res => {
  //   return res.name
  // })

  let province = []
  let city = []
  let area = []
  export default {
    name: 'ToRent',
    components: {
      'v-header': headTop,
      publish
    },
    data () {
      return {
        homeName: '', // 小区名称
        houseDetail: '',
        showLoading: false,
        holder: '例如出租17幢2单元1003室101m²(字数不超过200)',
        serverIds: [],
        // 区域选择
        code: '',
        areaVisible: false,
        areaString: '请选择省市区',
        array: [],
        keepArea: '',
        slots: [{
          flex: 1,
          values: province,
          className: 'slot1',
          textAlign: 'center'
        }, {
          divider: true,
          content: '-',
          className: 'slot2'
        }, {
          flex: 1,
          values: city,
          className: 'slot3',
          textAlign: 'center'
        }, {
          divider: true,
          content: '-',
          className: 'slot4'
        }, {
          flex: 1,
          values: area,
          className: 'slot5',
          textAlign: 'center'
        }]
      }
    },
    mounted () {
      // console.log(data)
      data.map(res => {
        province.push(res.name)
      })
      data.map(res => {
        res.childs.map(res => {
          // console.log(res)
          city.push(res.name)
        })
      })
      data.map(res => {
        res.childs.map(res => {
          res.childs.map(res => {
            // console.log(res)
            area.push(res.name)
          })
        })
      })
    },
    methods: {
      // 区域选择
      cancelBtn () {
        this.areaVisible = false
      },
      sureBtn () {
        this.areaString = this.keepArea
        this.areaVisible = false
        console.log(this.code)
      },
      handlerArea () {
        this.areaVisible = true
      },
      onValuesChange (picker, values) {
        // console.log(values)
        let one = values[0]
        let two = values[1]
        let three = values[2]
        index = province.indexOf(one) // 省
        if (index >= 0 && province.length > 0) {
          city = data[index].childs.map(res => { //  市
            return res.name
          })
          picker.setSlotValues(1, city)
          two = values[1]
        }

        index2 = city.indexOf(two) // 区
        if (index2 >= 0 && city.length > 0) {
          area = data[index].childs[index2].childs.map(res => {
            return [res.name, res.code]
          })
          let newarea = []
          for (var i = 0; i < Object.values(area).length; i++) {
            newarea.push(Object.values(area)[i][0])
            if (three == Object.values(area)[i][0]) {
              this.code = Object.values(area)[i][1]
            }
          }
          picker.setSlotValues(2, newarea)
          three = values[2]
        }
        this.keepArea = values.join('-') // 拼接字符串（选中好的值以-连接）
      },
      // 组件部分
      getValue (value) {
        this.houseDetail = value
      },
      getImage (image) {
        this.serverIds = image
      },
      addPic () {
        setTimeout(function () {
          Indicator.close()
        }, 6000)
        if (!this.houseDetail.trim().length || !this.houseDetail || !this.serverIds.length || !this.homeName) {
          // if (!this.houseDetail.trim().length || !this.houseDetail || !this.homeName) {
          Toast({
            message: '请填写完整信息',
            position: 'middle',
            duration: 2000
          })
          return
        }
        Indicator.open({
          text: '发布中...',
          spinnerType: 'fading-circle'
        })
        const url = `${commonUrl.apihost}index.php/home/renthouse/add`
        const data = {
          content: this.houseDetail,
          serverIds: this.serverIds,
          areas_id: loadVillageId(),
          openid: loadOpenId(),
          district: this.code,
          areas_name: this.homeName
        }
        this.$http.post(url, qs.stringify(data), {headers: {'Content-Type': 'application/x-www-form-urlencoded'}}).then(res => {
          if (res.data.code === 200) {
            Indicator.close()
            Toast({
              message: '发布成功',
              position: 'middle',
              duration: 1500
            })
            history.replaceState({}, '', '/Home')
            this.$router.push('/my/MyIdle')
          }
          if (res.data.code === 400) {
            Indicator.close()
            Toast({
              message: '发布失败',
              position: 'middle',
              duration: 1500
            })
          }
          if (res.data.code === 401) {
            Indicator.close()
            Toast({
              message: '您的发表帖子已经触犯相关法律法规,暂时不能使用发帖和评论功能.',
              position: 'middle',
              duration: 1500
            })
          }
        })
      }
    }
  }
</script>
